<template>
    <h3>WhyRef</h3>
    <p>出生年份: {{birthYear}}</p>
    <p>周岁： {{age}}</p>
    <p>虚岁： {{xusui}}</p>
    <p>你爹贵庚 {{daddyAge}}</p>
</template>

<script>
import { computed, reactive, toRefs } from 'vue';

export default {
    name:'Computed',

    /* 组合式API（compositionAPI）入口 */
    setup(props,ctx){
        console.log('Computed setup',props,ctx);

        /* 一手数据在这里 */
        const state = reactive({
            birthYear: 2002,
            age:20
        })

        /* 二手数据在这里 */
        /* 使用computed基于一手数据创建二手数据 */
        const xusui = computed(
            () => state.age + 1
        )
        const daddyAge = computed(
            () => state.age + 20
        )

        /* 数据变化在这里 */
        setInterval(() => {
            state.age++
        }, 1000);

        return {
            // 将state打散为一堆key的引用 并暴露给模板
            ...toRefs(state),

            // 将响应式的二手数据暴露
            xusui,
            daddyAge
        }
        
    }

}
</script>